-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Initial commit of amp-access-scroll #12955
Conversation
kushal
commented
Jan 22, 2018
- Adds an access vendor named scroll
- If user is authenticated, adds UI element to page
@dvoytenko Anyone else familiar with access you recommend to review this? |
@aghassemi I'm on it. |
buildUrl: accessService.buildUrl.bind(accessService), | ||
collectUrlVars: accessService.collectUrlVars_.bind(accessService), | ||
}); | ||
this.element_ = null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
jsdoc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
/** | ||
* @extends {HTMLElement} | ||
*/ | ||
class ScrollElement extends HTMLElement { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this now possible on all browsers? I feel like I've run into some compatibility issues before.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think i was confused about what you wanted here, put something in for now
class ScrollElement extends HTMLElement { | ||
constructor(ampdoc) { | ||
super(); | ||
installStylesForDoc(ampdoc, CSS, () => {}, false, TAG); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you pls check if installStylesForDoc
protects from inserting stylesheet twice?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yup, it does
super(); | ||
installStylesForDoc(ampdoc, CSS, () => {}, false, TAG); | ||
|
||
this.ampdoc = ampdoc; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
jsdoc here and below.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
this.placeholder_.classList.add('amp-access-scroll-placeholder'); | ||
this.wrapper_.appendChild(this.placeholder_); | ||
|
||
const img = document.createElement('amp-img'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, totally fine to use just normal <img>
, especially for a logo. This kind of logo might just be better to do via CSS background, but up to you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just changed to img for now
this.iframe_.setAttribute('allowtransparency', 'true'); | ||
this.iframe_.setAttribute('title', 'Scroll'); | ||
this.iframe_.setAttribute('width', '100%'); | ||
this.iframe_.setAttribute('height', '100%'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it possible to set sandbox
for this iframe?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should be fine
} | ||
|
||
show() { | ||
Services.accessServiceForDoc(this.ampdoc) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
accessService
is already passed in the constructor. Can you save it there and use it here?
this.wrapper_.removeChild(this.placeholder_); | ||
}; | ||
this.iframe_.setAttribute('src', | ||
'https://connect.scroll.com/amp/scrollbar?readerId=' + readerId); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's do encodeURIComponent(readerId)
. Should be websafe, but this way it's for sure.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
} | ||
} | ||
|
||
customElements.define('amp-access-scroll-elt', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we have to define it in CE? That's a bit rife with incompatibilties. I think it'd be just safer all around to just have ScrollElement a wrapper/holder class. Is there a strong reason to register it in CE?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
see above
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
buildUrl: accessService.buildUrl.bind(accessService), | ||
collectUrlVars: accessService.collectUrlVars_.bind(accessService), | ||
}); | ||
this.element_ = null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
/** | ||
* @extends {HTMLElement} | ||
*/ | ||
class ScrollElement extends HTMLElement { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think i was confused about what you wanted here, put something in for now
class ScrollElement extends HTMLElement { | ||
constructor(ampdoc) { | ||
super(); | ||
installStylesForDoc(ampdoc, CSS, () => {}, false, TAG); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yup, it does
super(); | ||
installStylesForDoc(ampdoc, CSS, () => {}, false, TAG); | ||
|
||
this.ampdoc = ampdoc; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
this.placeholder_.classList.add('amp-access-scroll-placeholder'); | ||
this.wrapper_.appendChild(this.placeholder_); | ||
|
||
const img = document.createElement('amp-img'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just changed to img for now
this.iframe_.setAttribute('allowtransparency', 'true'); | ||
this.iframe_.setAttribute('title', 'Scroll'); | ||
this.iframe_.setAttribute('width', '100%'); | ||
this.iframe_.setAttribute('height', '100%'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should be fine
this.wrapper_.removeChild(this.placeholder_); | ||
}; | ||
this.iframe_.setAttribute('src', | ||
'https://connect.scroll.com/amp/scrollbar?readerId=' + readerId); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
} | ||
} | ||
|
||
customElements.define('amp-access-scroll-elt', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
see above
By the way, I think the answer is no, but is there any way for our extension to also automagically provision our amp-analytics URLs? Also, should I add an OWNERS file? |
- Adds an access vendor named scroll - If user is authenticated, adds UI element to page
4966bff
to
0cfeff6
Compare
* Revision bump for #13036 * Revision bump for #13073 * Add DEDUPE_ON_MINIFY flags to license tags so that release process can reduce the number of identical duplicate licenses in the minified validator. * Add requires_extension to AttrSpec. * JSDoc updates. * Generated validator javascript improvements. * Add comment to ValidationError hinting at how to render. * Revision bump for #12955 * Add new error types for future CSS validation. * Revision bump for #12798 * Fix a typo. * Allow animation-timing-function for keyframes * Fix typo
* Initial commit of amp-access-scroll - Adds an access vendor named scroll - If user is authenticated, adds UI element to page * Review fixes * Fix tests * Add OWNERS file
* Revision bump for ampproject#13036 * Revision bump for ampproject#13073 * Add DEDUPE_ON_MINIFY flags to license tags so that release process can reduce the number of identical duplicate licenses in the minified validator. * Add requires_extension to AttrSpec. * JSDoc updates. * Generated validator javascript improvements. * Add comment to ValidationError hinting at how to render. * Revision bump for ampproject#12955 * Add new error types for future CSS validation. * Revision bump for ampproject#12798 * Fix a typo. * Allow animation-timing-function for keyframes * Fix typo
* Initial commit of amp-access-scroll - Adds an access vendor named scroll - If user is authenticated, adds UI element to page * Review fixes * Fix tests * Add OWNERS file
* Revision bump for ampproject#13036 * Revision bump for ampproject#13073 * Add DEDUPE_ON_MINIFY flags to license tags so that release process can reduce the number of identical duplicate licenses in the minified validator. * Add requires_extension to AttrSpec. * JSDoc updates. * Generated validator javascript improvements. * Add comment to ValidationError hinting at how to render. * Revision bump for ampproject#12955 * Add new error types for future CSS validation. * Revision bump for ampproject#12798 * Fix a typo. * Allow animation-timing-function for keyframes * Fix typo
* Initial commit of amp-access-scroll - Adds an access vendor named scroll - If user is authenticated, adds UI element to page * Review fixes * Fix tests * Add OWNERS file
* Revision bump for ampproject#13036 * Revision bump for ampproject#13073 * Add DEDUPE_ON_MINIFY flags to license tags so that release process can reduce the number of identical duplicate licenses in the minified validator. * Add requires_extension to AttrSpec. * JSDoc updates. * Generated validator javascript improvements. * Add comment to ValidationError hinting at how to render. * Revision bump for ampproject#12955 * Add new error types for future CSS validation. * Revision bump for ampproject#12798 * Fix a typo. * Allow animation-timing-function for keyframes * Fix typo
@kushal please create a .md file with doc for your extension |